<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>getElementsByTagName获取checkbox进行全选</title>
		<style type="text/css">
			#myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
			#myTable td,#myTable th{ background-color: white;}
			#myDiv{width: 900px; margin: 0px auto; height: 30px; line-height: 30px; 
			text-align: center;}
		</style>
		<!-- <script>======代码======</script> -->
		
		
	</head>
	<body>
		
		<table cellspacing="1" id="myTable">
		
			<tr>
				<th width="200">
                  <input type="checkbox" id="all" onchange="change1()" />全选
				<input type="checkbox" id="Selonall" onchange="change()" />反选
            </th>
				<th width="200">姓名</th>
				<th width="200">性别</th>
				<th width="200">专业</th>
				<th width="200">爱好</th>
			</tr>
		
			<tr>
				<td><input type="checkbox" name="cb" class="item"></td>
				<td>刘备</td>
				<td>男</td>
				<td>软件开发</td>
				<td>抽烟</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb" class="item"/></td>
				<td>关羽</td>
				<td>男</td>
				<td>国际贸易</td>
				<td>喝酒</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb" class="item"/></td>
				<td>张飞</td>
				<td>男</td>
				<td>园林设计</td>
				<td>烫头发</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb" class="item"/></td>
				<td>赵云</td>
				<td>男</td>
				<td>平面设计</td>
				<td>抽烟</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb" class="item"/></td>
				<td>黄忠</td>
				<td>男</td>
				<td>影视制作</td>
				<td>玩游戏</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="cb" class="item"/></td>
				<td>小乔</td>
				<td>女</td>
				<td>高级护理</td>
				<td>唱歌</td>
			</tr>
	
		</table>


		<script type="text/javascript">
		
			var input = document.querySelectorAll('input')
			// function change1(){
			// var input = document.querySelectorAll('input')
			// var count = 0
			// for (let index = 2; index < input.length; index++){
			// 	if (input[index].checked) {
			// 		input[index].checked=false
			// 	count++
			// }else{
			// 	input[index].checked=true
			// 	}
			// }
			// if (count ==input.length -2) {
			// 	input[0].checked=false
			// }else if(count==0){
			// 	input[0].checked=true
			// }
		
			// }

			//全选
			function change1() {
				var a = document.querySelector('#all').checked
				if (a== false ){
				for (let index = 2; index < input.length; index++){
					input[index].checked =false
				}
			   }else{
					for (let index = 2; index < input.length; index++){
						input[index].checked =true
				}
			}
		}
			
			//反选
			function change(){
				for (let index = 2; index < input.length; index++){
					if (input[index].checked) {
						input[index].checked=false
					}else{
						input[index].checked=true
					}
				}
				// if (a==input.length -2) {
				// 	change1();
				// }
			}






		// 	var all = document.querySelector('#all')
		// 	var item = document.querySelectorAll('.item')
		// 	all.onclick = function () {
		// // 遍历所有单独项，全选反选被点击后把值赋值给所有单独项实现全选反选
		// for(var i = 0; i < item.length; i++) {
		// 	item[i].checked = all.checked
		// }
		// }
	
		// // 遍历每一个单独项，为每个单独项绑定点击事件
		// for(var i = 0; i < item.length; i++) {
		// item[i].onclick = function () {
		// 	// 设置统计变量
		// 	var count = 0
		// 	// 遍历每一个单独项，如果有其中一个被选中，统计变量加1
		// 	for(var j = 0; j < item.length; j++) {
		// 	if (item[j].checked) {
		// 		count++
		// 	}
		// 	}
		// 	// 根据选中数量决定是否全选
		// 	if (count === item.length) {
		// 	all.checked = true
		// 	}else {
		// 	all.checked = false
		// 	}
		// }
		// }


	
		// 	document.getElementById("Selonall").onclick = function () {
		// 	var cbs = document.getElementsByName("cb");
		// 	for (var i = 0; i < cbs.length; i++) {
		// 		cbs[i].checked = !cbs[i].checked;
		// 	}
		// }



		</script>
	</body>
</html>